<template>
  <div class="gaode-map">
    <top-bar :option=option @handlePick="handlePick"></top-bar>
    <div class="space-message-wrap">
      <el-switch v-model="option.panorama" :width="30" active-text="全景网络" :change="handlePanorama()">
      </el-switch>
    </div>
    <div id="map" ref="map">
      <info-temp :windowPixel="windowPixel" v-show="show" :show="show" @close="closeInfoBoard" @panBy="panBy" :mapWidth="mapWidth">
      </info-temp>
    </div>
    <sphere-viewer v-show="panorama.show" ref="sphere" :panoramaId="panorama.id" @close="closePanorama"></sphere-viewer>
    <!-- <button @click="go">按钮</button> -->
  </div>
</template>
<script>
  // import Vue from 'vue'
  import TopBar from './TopBar'
  import infoTemp from './infoTemp'
  import { MapLoaded } from '../../gaodeJs/index.js'
  import { createId } from 'utils'
  import MARKER from 'gaodeJs/marker'
  import { mapMutations } from 'vuex'
  import SphereViewer from '@/components/SphereViewer'
  import { getMapMarker } from 'api/getData'
  export default {
    data() {
      return {
        option: {
          newDiscovery: true,
          toVerify: true,
          calcConfirmed: true,
          processed: true,
          pseudoChange: true,
          panorama: true
        },
        panorama: {
          show: false,
          id: ''
        },
        windowPixel: { x: 0, y: 0 },
        show: false, // 是否显示弹框
        mapWidth: 0 // 地图容器的宽度
        // Marker: new Marker()
      }
    },
    beforeCreate() {
      // this.loadMap = MapLoaded('d275691902d1744cad9a7ddc1fc20657')
      this.loadMap = MapLoaded('4030fc33588ec534428f38c3893ba07e')
    },
    created() {
      this.data = {}
    },
    mounted() {
      this.loadMap.then((AMap) => {
        console.log(AMap)
        this.errNetwork = false
        // this.AMap = AMap
        // initAMapUI() // 这里调用initAMapUI初始化
        this.initMap(AMap)
        this.createPolygon(AMap)
      }).catch(() => {
        this.errNetwork = true
      })
    },
    methods: {
      createPolygon(AMap) {
        var path = [
          new AMap.LngLat(114.984501, 22.836335),
          new AMap.LngLat(115.002483, 22.835071),
          new AMap.LngLat(115.006561, 22.817864),
          new AMap.LngLat(114.980424, 22.818576)
        ]
        var polygon = new AMap.Polygon({
          path: path,
          fillColor: 'transparent', // 多边形填充颜色
          borderWeight: 2, // 线条宽度，默认为 1
          strokeColor: '#3399FF', // 线条颜色
          strokeStyle: 'dashed'
        })
        this.gaodemap.add(polygon)
        polygon.on('mouseover', function (event) {
          polygon.setOptions({
            strokeStyle: 'solid',
            strokeColor: '#3366CC'
          })
        })
        polygon.on('mouseout', function (event) {
          polygon.setOptions({
            strokeStyle: 'dashed',
            strokeColor: '#3399FF'
          })
        })
        polygon.on('dblclick', function (event) {
          console.log(event)
        })
      },
      panBy(x, y) { // 移动偏移
        console.log(x, y)
        this.gaodemap.panBy(x, y)
      },
      closePanorama() {
        this.panorama.show = false
      },
      closeInfoBoard() { // 关闭气泡框
        this.show = false
        this.selectMark({})
        // this.gaodemap.panTo([114.213012, 22.6741521])
      },
      // change() {
      //   let newComp = new Vue({ render: h => h(temp) })
      //   console.log(newComp.$mount())
      //   // console.log(document.getElementById('edituser'))
      //   let tempComp = newComp.$mount()
      //   document.getElementById('edituser').appendChild(tempComp.$el)
      // },
      handlePanorama() {
        if (this.option['panorama']) {
          if (MARKER.group.panorama) MARKER.groupShow('panorama')
        } else {
          if (MARKER.group.panorama) MARKER.groupHide('panorama')
        }
      },
      handlePick(key, status) {
        this.option[key] = status
        if (this.option[key]) {
          MARKER.groupShow(key)
        } else {
          MARKER.groupHide(key)
        }
      },
      initMap(AMap) {
        this.gaodemap = new AMap.Map('map',
        {
          viewMode: '2D',
          resizeEnable: true,
          zoom: 15,
          center: [114.989136, 22.831075],
          mapStyle: 'amap://styles/dark'
        })
        MARKER.init(this.gaodemap, AMap)
        this.mapEvent()
        this.initMark(AMap) // 数据加载完成后调用
      },
      initMark(AMap) {
        // const gps = [114.98321416644, 22.8265097222519]
        //  坐标转换
        // console.log(AMap.convertFrom)
        // AMap.convertFrom(gps, 'gps', (status, result) => {
        //   if (result.info === 'ok') {
        //     var lnglats = result.locations // Array.<LngLat>
        //     console.log(lnglats)
        //   }
        // })
        const markArr = [
        {
          type: 'newDiscovery',
          position: [114.2212121, 22.674153],
          id: createId(),
          class: 'illegalInformation'
        },
        {
          type: 'toVerify',
          position: [114.2023461, 22.674151],
          id: createId(),
          class: 'illegalInformation'
        },
        {
          type: 'toVerify',
          position: [114.21123461, 22.6734151],
          id: createId(),
          class: 'illegalInformation'
        },
        {
          type: 'calcConfirmed',
          position: [114.1923161, 22.674151],
          id: createId(),
          class: 'illegalInformation'
        }, {
          type: 'processed',
          position: [114.1823061, 22.674151],
          id: createId(),
          class: 'illegalInformation'
        }, {
          type: 'pseudoChange',
          position: [114.17522961, 22.674151],
          id: createId(),
          class: 'illegalInformation'
        }]

        getMapMarker().then(res => {
          const dataArr = res.data
          MARKER.addOverlay(markArr, this.evet, AMap)
          MARKER.addOverlay(dataArr, this.evet, AMap)
          MARKER.initOverlayStatus(this.option) // 标注是否是显示状态
          this.setClusterer(AMap) // 设置聚合
        }).catch(err => {
          console.log(err)
        })
      },
      setClusterer(AMap) {
        // /** 点聚合
        // var styles = [{
        //   url: './site/images/1.png',
        //   size: new AMap.Size(52, 52),
        //   offset: new AMap.Pixel(-26, -48)
        // },
        // {
        //   url: './site/images/2.png',
        //   size: new AMap.Size(32, 32),
        //   offset: new AMap.Pixel(-16, -30)
        // },
        // {
        //   url: './site/images/3.png',
        //   size: new AMap.Size(48, 48),
        //   offset: new AMap.Pixel(-24, -45),
        //   textColor: '#CC0066'
        // }]
        const markerArr1 = MARKER.group.panorama.getOverlays()
        const markerArr2 = MARKER.group.toVerify.getOverlays()
        this.gaodemap.plugin(['AMap.MarkerClusterer'], () => {
          return new AMap.MarkerClusterer(this.gaodemap, markerArr1, {
            gridSize: 20,
            minClusterSize: 2,
            averageCenter: false,
            // zoomOnClick: false,
            styles: [{
              url: './site/images/1.png',
              size: new AMap.Size(52, 52),
              offset: new AMap.Pixel(-26, -48)
            }]
          })
        })
        this.gaodemap.plugin(['AMap.MarkerClusterer'], () => {
          return new AMap.MarkerClusterer(this.gaodemap, markerArr2, {
            gridSize: 20,
            minClusterSize: 2,
            averageCenter: false,
            styles: [{
              url: './site/images/verify.png',
              size: new AMap.Size(32, 32),
              offset: new AMap.Pixel(-16, -30)
            }]
          })
        })
        //  */
      },
      changeWindowPixel(ev) {
        if (this.infoLnglat) {
          const lnglat = this.infoLnglat
          var lnglat1 = [lnglat[0], lnglat[1]]
          var pixel = this.gaodemap.lngLatToContainer(lnglat1)
          this.windowPixel = pixel
        }
      },
      evet(ev) { // 点击标注绑定事件
        const classType = ev.target.getExtData().class
        const id = ev.target.getExtData().id
        const type = ev.target.getExtData().type
        if (classType === 'illegalInformation') {
          this.mapWidth = this.$refs.map.offsetWidth
          this.show = true
          // this.show_info = true
          const position = ev.target.getPosition()
          this.infoLnglat = [position.lng, position.lat]
          const lnglat1 = [this.infoLnglat[0], this.infoLnglat[1]]
          const pixel = this.gaodemap.lngLatToContainer(lnglat1)
          this.windowPixel = pixel
          const markObj = {
            id: id,
            type: type
          }
          this.selectMark(markObj)
        }
        if (classType === 'spaceInformation') {
          if (type === 'panorama') {
            this.panorama.show = true
            this.panorama.id = id
          }
        }
        // if (!this.show) {
        // const markObj = {
        //   id: ev.target.getExtData().id,
        //   type: ev.target.getExtData().type
        // }
        // this.selectMark(markObj)
        // console.log(ev.target.getExtData())
        // console.log(ev.target.getPosition())
        // }
      },
      mapEvent() {
        this.gaodemap.on('mapmove', this.changeWindowPixel) // 地图变化改变信息框的位置
        this.gaodemap.on('resize', this.changeWindowPixel)
        this.gaodemap.on('zoomchange', this.changeWindowPixel)
        this.gaodemap.on('click', (e) => {
          console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
        })
      },
      ...mapMutations({
        selectMark: 'SELECT_MARK'
      })
    },
    // watch: {
    //   show_details(newVal) {
    //     if (newVal === false) {
    //       this.show = false
    //     }
    //   }
    // },
    components: {
      SphereViewer,
      TopBar,
      infoTemp
    }
  }
</script>
<style lang="less">
  .gaode-map {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    #map {
      width: 100%;
      height: 100%;
    }

    .space-message-wrap {
      position: absolute;
      z-index: 99;
      top: 20px;
      right: 20px;
      max-width: 30vw;
      padding: 10px;
      background: #4a4a4a;
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.26);
      color: #fff;

      .el-switch__label {
        color: #fff;
        user-select: none;

        &.is-active {
          color: #409EFF;
        }
      }
    }
  }
</style>